<template>
<!-- 公告/反馈管理 -->
  <div>
    <!-- 搜索/新增 -->
    <div>
      <el-input v-model="formSearch.nickname" placeholder="请输入姓名" class="search"></el-input>
      <el-input v-model="formSearch.username" placeholder="请输入学号" class="search"></el-input>
      <el-button type="primary" plain @click="search()">搜索</el-button>
      <el-button @click="reset()">重置</el-button>
      <el-button class="add" type="primary" @click="add()">新增</el-button>
    </div>
    <!-- 列表 -->
    <BaseTable
       :tableData="tableData"
       :loading="loading"
       :clickRow="true"
       :page="page"
       @pageChange="pageChange"
      >
      <el-table-column prop="nickname" label="创建人" width="180"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" :formatter="dateFormat" width="160"></el-table-column>
      <el-table-column prop="username" label="创建人学号" width="160"></el-table-column>
      <el-table-column prop="notice" label="公告/反馈内容"></el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="s">
          <el-button type="text" class="cell-del-button" @click="remove(s.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </BaseTable>
    <!-- 新增弹框 -->
    <Add ref="addDialog" @getListData="initData"></Add>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name:'notice',
  data(){
    return {
      tableData: [],
      loading: false,
      formSearch: {
        nickname: '',
        username: ''
      }, 
      page: {
        page: 1,
        limit: 10,
        total: 0
      },
    }
  },
  activated(){
    this.initData();
  },
  mounted() {
    this.initData();
  },
  components: {
    BaseTable: () => import("components/BaseTable"),
    Add: () => import("views/Notice/Add")
  },
  methods:{
    //格式化时间
    dateFormat:function(row,column){
      var date = row[column.property];
      if(date == undefined){return ''};
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    //新增弹窗
    add() {
      this.$refs.addDialog.open()
    },
    //搜索
    search(){
      this.page.page = 1 
      this.initData()
    },
    //重置
    reset() {
      this.formSearch.nickname = '',
      this.formSearch.username = '';
      this.page.page = 1;
      this.page.total = 0;
      this.initData();
    },
    //分页
    pageChange(val) {
      this.page = val;
      this.initData();
    },
    //列表
    initData() {
     this.loading = true;
     this.$http.get("notice/listNotice",{ params :{
        page: this.page.page,
        limit: this.page.limit,
        nickname: this.formSearch.nickname,
        username: this.formSearch.username
     }})
       .then((res) => {
        console.log(res)
        console.log( window.sessionStorage.nickname,2222)
        if (res.status === 200) {
          this.tableData = res.data.data;
          this.page.total = res.data.total;
          console.log(this.tableData,444)
        }
        this.loading = false;
       })
       .catch((err) => {
         this.loading = false;
         this.$message.error("查询数据失败")
       })    
    },
    //删除公告
    remove(_id) {
      this.$confirm('此操作将删除该公告/反馈, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        this.$http.delete("notice/delNotice/" + _id)
          .then((res) => {
            console.log(res,456)
            if (res.status === 200) {
             this.tableData = res.data.data;
             this.page.total = res.data.total;
             this.$message.success("删除该公告成功!");
             this.reset();
           }
           this.loading = false;
          })
          .catch((err) => {
            this.loading = false;
            this.$message.error("删除公告失败")
            this.reset();
          })     
      }).catch(()=>{
        
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.search{
  width: 15%;
  margin-right: 15px;
}
.add{
  float: right;
  margin-right: 25px;
}
</style>